import React from 'react';

class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            username: ""
         }
         this.inputChange = this.inputChange.bind(this)
    }

    inputChange (e) {
        this.setState({
            username: e.target.value
        })
    }

    changeUserNameValue = ()=> {
        this.setState({
            username: "jake"
        })
    }

    render() { 
        return (  
            <div>
                <h3> 双向数据绑定</h3>

                <input value = {this.state.username} onChange={this.inputChange} />

                <br/>
                {this.state.username}
                <br/>
                <br/>
                <button onClick={this.changeUserNameValue}> Change username value</button>
            </div>
         );
    }
}
 
export default TodoList;